<template>
  <div class="login-container">
    <div class="container" :class="{'right-panel-active': isRightPanelActive}">
      <div class="form-container sign-up-container">
        <form @submit.prevent="switchToSignIn">
          <h1>创建账号</h1>
          <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
          </div>
          <span>或使用邮箱注册</span>
          <div class="input-wrapper">
            <el-input v-model="name" placeholder="姓名" class="input-field"></el-input>
          </div>
          <div class="input-wrapper">
            <el-input v-model="email" type="email" placeholder="邮箱" class="input-field"></el-input>
          </div>
          <div class="input-wrapper">
            <el-input v-model="password" type="password" placeholder="密码" class="input-field"></el-input>
          </div>
          <el-button type="primary" class="form-button" native-type="submit">注册</el-button>
        </form>
      </div>
      <div class="form-container sign-in-container">
        <form @submit.prevent="switchToSignUp">
          <h1>登录</h1>
          <div class="social-container">
            <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
          </div>
          <span>或使用账号登录</span>
          <div class="input-wrapper">
            <el-input v-model="email" type="email" placeholder="邮箱" class="input-field"></el-input>
          </div>
          <div class="input-wrapper">
            <el-input v-model="password" type="password" placeholder="密码" class="input-field"></el-input>
          </div>
          <a href="#">忘记密码？</a>
          <el-button type="primary" class="form-button" native-type="submit">登录</el-button>
        </form>
      </div>
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>欢迎回来！</h1>
            <p>请登录您的账号以继续使用我们的服务</p>
            <el-button class="ghost" @click="switchToSignIn">登录</el-button>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>你好！</h1>
            <p>输入您的个人信息开始使用我们的服务</p>
            <el-button class="ghost" @click="switchToSignUp">注册</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElInput } from 'element-plus'
const isRightPanelActive = ref(false);
const name = ref('');
const email = ref('');
const password = ref('');

const switchToSignIn = () => {
  isRightPanelActive.value = false;
};

const switchToSignUp = () => {
  isRightPanelActive.value = true;
};
</script>

<style>
@import './LoginComponent.css';
</style>